iT邦幫忙

2022 iThome 鐵人賽

DAY 2
0
自我挑戰組

跟我一起學習HTML&CSS網頁設計吧系列 第 2

[DAY_2]VScode 優點與下載教程

  • 分享至 

  • xImage
  •  

為何是VScode? 選它的原因:

要寫好一個程式,或者想要好好寫程式,那不可或缺的就是一個好用的文字編輯器。

這次推薦大家下載的程式為「visual studio code」。
以下為其優點:

  • Emmet
    內建的快速撰寫輔助工具Emmet功能,可以讓我們編碼打起來更快速,不用再一個字一個字慢慢打(不怕打錯了)。
  • color picker
    自動的顏色代碼選取工具,在許多編寫工具中,其實都需要自己上google搜尋顏色代碼-色碼表,透過其他工具找尋;但vs code已具備這功能,當我們之後的css教學中,也會需要用到很多關於顏色的設定,可以大幅提升效率呀
  • Git 整合
  • 自動版面排版功能
  • 主題顏色、個人化設定
    可以依據自己的電腦使用習慣,更改編輯器的主題顏色、快捷鍵設定等。
  • IntelliSense預測功能
    在使用者輸入相關詞彙後,vs code會進行使用者輸入的預測,包含接下來有可能使用到的方法、函式、變數......(包含字定義變數)等等,提供使用者選擇。

下載

在google搜尋「visual studio code」點擊Download進入下載頁面
https://ithelp.ithome.com.tw/upload/images/20220916/20152215HawLxKQrLK.jpg

就可以看到4個大大的藍色按鈕,依據你的電腦作業系統,選擇對應的下載鈕(此篇下載的作業系統為windows)
https://ithelp.ithome.com.tw/upload/images/20220916/20152215YPQmBHWaMU.jpg

按下後,他就會自己下載(此範例為VSCodeUserSetup-x64-1.71.2.exe)。
https://ithelp.ithome.com.tw/upload/images/20220916/201522151yweDQ3r89.jpg

就照著提示預設的操作按下下一步安裝,你就會順利得到一個好用的程式語言編輯器!/images/emoticon/emoticon12.gif
https://ithelp.ithome.com.tw/upload/images/20220916/20152215bGltCipSOM.jpg


剛安裝好開啟的頁面如下
https://ithelp.ithome.com.tw/upload/images/20220916/20152215j2rdbOEiTV.jpg

左方是快速功能的顯示區,點擊兩下可隱藏。
https://ithelp.ithome.com.tw/upload/images/20220916/20152215ZyB1r4Bw6i.jpg

中間的歡迎頁面>開始

  1. 新增檔案(新建檔案使用)
  2. 開啟檔案
  3. 開啟資料夾(最常使用)

下方也會自動列出最近有使用過的資料夾,供使用者快速進入
https://ithelp.ithome.com.tw/upload/images/20220916/201522158QXWrdoS5s.jpg

推薦下載的延伸模組
VS Code 的中文(繁體)語言套件:「Chinese (Traditional) Language Pack for Visual Studio Code

若英文不太好,或者是想使用中文介面,這個模組必須下載來!
按下安裝即可使用

https://ithelp.ithome.com.tw/upload/images/20220916/20152215usuwemk5it.jpg


是不是很快速簡單呀,這麼多優點的文字編輯器先下載來使用了。
/images/emoticon/emoticon35.gif 那我們下回見~byebye


上一篇
[DAY_1]文章前言&簡單介紹HTML&CSS
下一篇
[DAY_3]HTML基本結構
系列文
跟我一起學習HTML&CSS網頁設計吧30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
kasey009
iT邦新手 5 級 ‧ 2023-06-30 22:00:23

目前重新開啟terminal,環境參數的地方尚未處理完畢(執行flutter命令會顯示No command),但直接用VsCode https://testmyspeed.onl/ 內的終端機跑就可以.

我要留言

立即登入留言